<template>
    <el-row class="pwd-container">
        <el-col :span="12" :offset="4" class="pwd-content">
            <h3>找回密码</h3>
            <hr>
            <div class="steps">
                <div class="left">
                    <h4>第一步</h4>
                    <h4 class="second-step">第二步</h4>
                </div>
                <div class="center"></div>
                <el-form class="right">
                    <h4>验证身份</h4>
                    <el-form-item>
                        <el-input class="phone" v-model="phone" size="medium" placeholder="请输入您注册时使用的手机号码"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-input class="verify-code" v-model="verify" size="medium" placeholder="请输入您收到的短信验证码"></el-input>
                        <el-button @click="sendSms" :disabled="sendStatus" class="verify-btn" size="medium">{{ sendText }}</el-button>
                    </el-form-item>
                    <h4>修改信息</h4>
                    <el-form-item>
                        <el-input size="medium" type="password" v-model="password" class="second-input" placeholder="请输入新的6-16位登录密码"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-input size="medium" type="password" v-model="confirmPassword" class="second-input" placeholder="请输入确认一下您的新密码"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button @click="resetPwd" type="primary" size="medium" class="second-input">修改密码</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </el-col>
    </el-row>
</template>
<script>
import { sms, resetPwd } from '@/utils/api'
export default {
  data () {
    return {
      phone: '',
      sendStatus: false,
      verify: '',
      password: '',
      confirmPassword: '',
      sendText: '获取验证码'
    }
  },
  methods: {
    async sendSms () {
      var reg = 11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/
      if (this.phone) {
        if (!reg.test(this.phone)) {
          this.$notify({
            title: '发送失败',
            message: '请填写正确的手机号码',
            type: 'error'
          })
        } else {
          let res = await sms({ phone: this.phone, is_for: '2' })
          if (!this.sendStatus) {
            if (res.error === '10') {
              this.$notify({
                title: '发送成功',
                message: `请查收`,
                type: 'success'
              })
              this.setTime(60)
            } else {
              this.$notify({
                title: '发送失败',
                message: res.result,
                type: 'error'
              })
            }
          }
        }
      } else {
        this.$notify({
          title: '发送失败',
          message: '手机号码还没填写呢',
          type: 'error'
        })
      }
    },
    async resetPwd () {
      if (!this.phone) {
        this.$notify({
          title: '请填写您的注册手机号码',
          type: 'error'
        })
      } else if (!this.verify) {
        this.$notify({
          title: '请填写正确的短信验证码',
          type: 'error'
        })
      } else if (!this.password || !this.confirmPassword) {
        this.$notify({
          title: '请填写要修改的秘密以及重复密码',
          type: 'error'
        })
      } else if (this.password !== this.confirmPassword) {
        this.$notify({
          title: '两次输入的密码不一致',
          type: 'error'
        })
      } else {
        let res = await resetPwd({ phone: this.phone, password: this.password, sms_code: this.verify })
        if (!this.sendStatus) {
          if (res.error === '10') {
            this.$notify({
              title: '修改成功',
              message: `密码修改成功`,
              type: 'success'
            })
            this.$router.push('/login')
            this.setTime(60)
          } else {
            this.$notify({
              title: '密码修改失败',
              message: res.result,
              type: 'error'
            })
          }
        }
      }
    },
    setTime (countdown) {
      if (!countdown) {
        this.sendText = '获取验证码'
        this.sendStatus = false
      } else {
        this.sendText = '重新发送(' + countdown + ')'
        this.sendStatus = true
        countdown--
        setTimeout(() => { this.setTime(countdown) }, 1000)
      }
    }
  }
}
</script>
<style lang="less">
.pwd-container {
    padding: 60px 0;
}
.pwd-content {
    h3 {
        margin-bottom: 15px;
    }
    h4 {
        margin-bottom: 20px;
    }
    .steps {
        display: flex;
        padding-top: 30px;
    }
    .second-step {
        margin-top: 217px;
    }
    .left {
        white-space: nowrap;
    }
    .center {
        width: 0;
        border-right: 1px solid #bbb;
        margin: 10px 20px;
        height: 420px;
    }
    .right>* {
        position: relative;
    }
    .right>*:before {
        content: " ";
        display: block;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #0195dd;
        position: absolute;
        left: -23px;
        top: 50%;
    }
    .right>h4:before {
        width: 10px;
        height: 10px;
        left: -25px;
        top: 30%;
    }
    input {
        border-radius: 0;
    }
    .phone {
        width: 340px;
    }
    .verify-code {
        width: 200px;
    }
    .verify-btn {
        width: 120px;
        margin-left: 16px;
        border: none;
        font-weight: bold;
        background: #eee;
        border-radius: 0;
    }
    button {
        border-radius: 0;
    }
    .confirm-btn {
        width: 200px;
    }
    .second-input {
        width: 340px;
    }
}
</style>
